<template>
  <div class="sub-box-border body">
    <div class="left-align sub-title">个人信息</div>
    <el-divider></el-divider>
    <div>
      <table>
        <tr>
          <td>昵称:</td>
          <td>
            <div class="table-interval box-standard">
              <el-input v-model="userNickname" placeholder="昵称"></el-input>
            </div>
          </td>
        </tr>
        <tr>
          <td>用户名:</td>
          <td>
            <div class="table-interval box-standard">
              <el-input v-model="userTelephone" placeholder="手机号"></el-input>
            </div>
          </td>
        </tr>
        <tr>
          <td>邮箱:</td>
          <td>
            <div class="table-interval box-standard">
              <el-input v-model="userEmail" placeholder="邮箱"></el-input>
            </div>
          </td>
        </tr>
        <tr>
          <td>权限:</td>
          <td>
            <div class="table-interval box-standard">
              <el-input v-model="authority" placeholder="权限" disabled>#{{authority}}</el-input>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <div class="box-standard table-interval box-standard">
              <el-button type="primary">更新</el-button>
            </div>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
    export default {
      name: "Information.vue",
      data(){
        return{
          userNickname: '',
          userTelephone: '',
          userEmail: '',
          authority: '教师'
        }
      },
      created() {
        let data = this.$data;
        this.axios.post('/user/getuser')
          .then(response => {
            let resData = response.data;
            if(resData.errCode == 200){
              resData = resData.data;
              data.userNickname = resData.userNickname;
              data.userTelephone = resData.userTelephone;
              data.userEmail = resData.userEmail;
            }else{
              alert(resData.errMsg);
            }
          })
      }
    }
</script>

<style scoped>
  .body{
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
  }
</style>
